<template>
	<div>
		<div ref="target" class="w-full h-full"></div>
	</div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
	data: {
		type: Array,
		required: true
	}
})


// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
	mChart = echarts.init(target.value)
	// 渲染 echarts
	renderChart()
})

// 渲染图表
const renderChart = () => {
	const exampleProject = props.data[0].item


	let str = "[" + props.data[0].contribute_top10.replace(/'/g, '"') + "]";
	let exampleProportion = JSON.parse(str);
	const formattedProportion = exampleProportion.map((item, index) => ({
		value: Math.round(item.proportion * 1000),
		name: item.contributor
	}));
	const options = {
		title: {
			text: exampleProject + '项目开发者总活跃度Top10比例图',
			left: 'center',
			textStyle: {
				color: '#ccc',
				// fontSize: 20
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},

		series: [
			{
				name: '项目活跃度占比*1000',
				type: 'pie',
				radius: [25, 140],
				center: ['50%', '58%', '50%', '42%'],
				roseType: 'radius',
				itemStyle: {
					borderRadius: 4,
					borderColor: '#ccc',
					borderWidth: 0.5

				},
				label: {
					show: true,
					position: 'outside',
					color: '#fff',
					formatter: '{b}\n{d}%'

				},
				emphasis: {
					label: {
						show: true
					}
				},
				labelLine: {
					show: true,
					length: 12,  // 引导线长度
					length2: 8
				},
				data: formattedProportion
			}
		]

	}

	mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
watch(
	() => props.data,
	() => {
		console.log('变化了');
		renderChart()
	},
	{ deep: true }
)

</script>

<style lang="scss" scoped></style>
